<template>
  <div class="cloud-teller-manage" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card class='cloud-teller-card'>
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top' :rules="rules">
          <el-row :gutter="10">
            <!-- <el-col :md="6" :lg="4">
                            <el-form-item label='机构编号' class='typeInfo-el-form-item' prop='branchId'>
                                  <select-tree ref="tree" v-model="queryForm.branchId" :single-check="true"
                                   :props='{id:"branchId",label: "branchName",children: "childBranch"}' :tree-data="brno"></select-tree>
                            </el-form-item>
                      </el-col> -->
            <el-col :md="6" :lg="4">
              <el-form-item label='云柜员所属中心号码' prop='branchId'>
                <!-- <el-select v-model='queryForm.branchId'>
                  <el-option v-for='item in branchnoOpions' :key='item.CENTERID+item.BRANCHNO' :label='item.CENTERNAME' :value='item.CENTERID'>
                  </el-option>
                </el-select> -->
                <el-input v-model='queryForm.branchId' placeholder="请输入云柜员所属中心号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='柜员号' class='typeInfo-el-form-item' prop='tellerId'>
                <el-input v-model='queryForm.tellerId' placeholder="请输入柜员号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='语言' prop='language'>
                <el-select v-model='queryForm.language'>
                  <el-option v-for='item in languageOpions' :key='item.value' :label='item.label' :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md='6' :lg='4'>
              <el-form-item label='柜员状态' prop='tellerstatus'>
                <el-select v-model='queryForm.tellerstatus'>
                  <el-option v-for='item in telletstatusOpions' :key='item.value' :label='item.label' :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="queryModel('search')">查询</el-button>
            </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop">
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class='type-info-bottom'>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Add')">
          <el-button type="primary" size="mini" @click="addDialogShow" icon='el-icon-plus'>新增</el-button>
        </el-col>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Edit')">
          <el-button type="primary" size="mini" @click="updateDialogShow" icon='el-icon-edit' :disabled="!updateButtonShow">维护</el-button>
        </el-col>
        <el-col :lg="2" :md="2" v-if="btnPermission('Button_Warning_Delete')">
          <el-button type="primary" size="mini" @click="deleteConfirm" icon='el-icon-delete' :disabled="!delButtonShow">删除</el-button>
        </el-col>
        <!-- <el-col :lg="4" :md="10">
          <el-tooltip content="全量同步设备数据到云柜台" placement="bottom">
            <el-button type="success" size="mini" @click="synchConfirm" icon='el-icon-position' round>全量同步</el-button>
          </el-tooltip>
        </el-col> -->
        <el-table ref="tableData" :data='tableDataPage' border min-height="400" width='100%' class="tableMarginTop" header-row-class-name="tableHeaderClass" highlight-current-row @selection-change="selectChange">
          <el-table-column type="selection" width="40px"></el-table-column>
          <!-- 这里的prop按照返回的字段去更新 -->
          <el-table-column prop='AGENTID' label='柜员号'></el-table-column>
          <el-table-column prop='AGENTNAME' label='柜员名称'></el-table-column>
          <el-table-column prop='AGENTSEX' label='性别'>
            <template slot-scope="scope">
              <span v-if="scope.row.AGENTSEX=='0'">男</span>
              <span v-if="scope.row.AGENTSEX=='1'">女</span>
            </template>
          </el-table-column>
          <el-table-column prop='AGENTROLE' label='角色'>
            <template slot-scope="scope">
              <span v-if="scope.row.AGENTROLE=='01'">普通坐席</span>
              <span v-if="scope.row.AGENTROLE=='02'">组长</span>
              <span v-if="scope.row.AGENTROLE=='03'">班长</span>
              <span v-if="scope.row.AGENTROLE=='04'">坐席主管</span>
              <span v-if="scope.row.AGENTROLE=='05'">坐席经理</span>
              <span v-if="scope.row.AGENTROLE=='06'">质检员</span>
              <span v-if="scope.row.AGENTROLE=='07'">质检主管</span>
              <span v-if="scope.row.AGENTROLE=='08'">培训师</span>
              <span v-if="scope.row.AGENTROLE=='09'">培训主管</span>
              <span v-if="scope.row.AGENTROLE=='10'">排班师</span>
              <span v-if="scope.row.AGENTROLE=='11'">排班主管</span>
              <span v-if="scope.row.AGENTROLE=='12'">知识库普通用户</span>
              <span v-if="scope.row.AGENTROLE=='13'">知识库管理员</span>
            </template>
          </el-table-column>
          <el-table-column prop='AGENTLEVEL' label='坐席级别'></el-table-column>
          <el-table-column prop='STAFSTS' label='柜员状态' >
            <template slot-scope="scope">
              <span v-if="scope.row.STAFSTS=='01'">试用</span>
              <span v-if="scope.row.STAFSTS=='02'">正式上岗</span>
            </template>
          </el-table-column>
          <el-table-column prop='TELPHONE' label='电话号码' width="150"></el-table-column>
          <el-table-column prop='EMAIL' label='邮箱' width="200"></el-table-column>
          <el-table-column prop='SERVICELEVEL' label='服务水平'>
            <template slot-scope="scope">
              <span v-if="scope.row.SERVICELEVEL=='3'">低级</span>
              <span v-if="scope.row.SERVICELEVEL=='6'">中级</span>
              <span v-if="scope.row.SERVICELEVEL=='9'">高级</span>
            </template>
          </el-table-column>
          <el-table-column prop='LANGUAGETYPE' label='语言' :formatter="languageFormat" width="100"></el-table-column>
          <el-table-column prop='ENGLEVEL' label='英语水平'>
            <template slot-scope="scope">
              <span v-if="scope.row.ENGLEVEL=='0'">不会</span>
              <span v-if="scope.row.ENGLEVEL=='3'">低级</span>
              <span v-if="scope.row.ENGLEVEL=='6'">中级</span>
              <span v-if="scope.row.ENGLEVEL=='9'">高级</span>
            </template>
          </el-table-column>
          <el-table-column prop='MULTITYPE' label='多媒体类型' :formatter="mutitypeFormat" width="100"></el-table-column>
          <el-table-column prop='LOGINFLG' label='登陆方式'>
            <template slot-scope="scope">
              <span v-if="scope.row.LOGINFLG=='0'">指纹</span>
              <span v-if="scope.row.LOGINFLG=='1'">密码</span>
            </template>
          </el-table-column>
          <el-table-column prop='GRABORDFLAG' label='订单分配方式'>
            <template slot-scope="scope">
              <span v-if="scope.row.GRABORDFLAG=='0'">自动派单</span>
              <span v-if="scope.row.GRABORDFLAG=='1'">柜员抢单</span>
            </template>
          </el-table-column>
          <el-table-column prop='CENTERID' label='云柜员所属机构号' ></el-table-column>
          <el-table-column prop='CENTERNAME' label='云柜员所属机构名称'  width="200"></el-table-column>
        </el-table>
        <el-pagination style="text-align:right;margin-top:20px;" v-show="this.tableData" 
            :current-page="currentPage" background
            :page-size="pageSize"
            @current-change="changePage"
            layout="total, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
      </el-card>
        <el-dialog title="授权管理" :visible.sync="isShow1" :lock-scroll=false width="450px">
      <el-card>
        <el-row>
          <el-col>
            <el-form ref="confirmPopform" :model="confirmPopform" :rules="powerRules" label-width="140px" size="mini">
              <el-form-item label="授权人用户名" prop='username'>
                <el-input v-model="confirmPopform.username" auto-complete="off" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="授权人密码" prop='password'>
                <el-input v-model="confirmPopform.password" auto-complete="off" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow1 = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="allPopSubmit" size="mini">确 定</el-button>
      </div>
    </el-dialog>
      <keep-alive>
         <component :is='dialogList.CloudTeller' :option='addDialogOptions' @refreshTable="queryModel('search')"></component>
      </keep-alive>
       <keep-alive>
         <component :is='dialogList.CloudTellerUpdate' :option='updateDialogOptions' @refreshTable="queryModel('search')" :message="this.multipleSelection"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  import CloudTeller from "./dialog/CloudTeller";
  import CloudTellerUpdate from "./dialog/CloudTellerUpdate";
  import selectTree from "@/components/selectTree2/";
  import toolBox from "@/CTManage/utils/toolBox";
  import getGlobalParams from '@/common/utils/getGlobalParams';
  //通讯相关
  import request from "@/common/utils/requestCT";
  import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
  import cloudTellerDel from "@/message/CTManage/teller/cloud-teller-del";
  import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
  import syncDevData from "@/message/CTManage/teller/syncDevData";
  import queryBranch from "@/message/CTManage/teller/cloud-teller-branch-query";
  // import authorazitionIns from "@/message/infoCollect/devMonitor/dev-authorazition";
  import Base64 from '@/CTManage/utils/base64';
  export default {
    name: "cloud-teller-manage",
    components: {
      selectTree
    },
    data() {
      return {
        confirmPopform: {
          username: "",
          password: ""
        },
        powerRules: { //表单验证
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }]
        },
        isShow1: false,
        branchnoOpions: [],
        rules: { //表单校验规则
          // branchId: [{
          //   required: true,
          //   message: "请输入机构号",
          //   trigger: "blur"
          // }]
          // TELLEID: [
          //   { required: true, message: "请输入柜员号", trigger: "change" }
          // ],
          // TELLERNAME: [
          //   { required: true, message: "请输入柜员名称", trigger: "blur" }
          // ],
          // LANGUAGE: [
          //   { required: true, message: "请选择语言", trigger: "blur" }
          // ],
          // TELLERSTATUS: [
          //   { required: true, message: "请选择柜员状态", trigger: "blur" }
          // ]
        },
        //页面公用
        loading: false,
        //表格
        brno: [],
        tableTotal: 0,
        tableData: [],
        currentPage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        addButtonShow: true,
        delButtonShow: false,
        updateButtonShow: false,
        queryForm: {
          branchId: '',
          tellerId: '',
          language: '',
          tellerstatus: ''
        },
        multipleSelection: [],
        telleridSelection: [],
        telletstatusOpions: [{
            label: '试用',
            value: '01'
          },
          {
            label: '正式上岗',
            value: '02'
          }
        ],
        languageOpions: [{
            label: '全语种',
            value: '0'
          },
          {
            label: '英语',
            value: '1'
          },
          {
            label: '地方方言',
            value: '2'
          },
          {
            label: '普通话',
            value: '3'
          }
        ],
        enumModule: {
          0: "全语种",
          1: "英语",
          2: "地方方言",
          3: "普通话"
        },
        mutitype: {
          "00": "电话",
          "01": "视频",
          "02": "在线"
        },
        dialogList: {
          CloudTeller,
          CloudTellerUpdate
        },
        addDialogOptions: {
          isShow: false
        },
        updateDialogOptions: {
          isShow: false
        },
      };
    },
    mounted() {
      this.branchInit()
      // console.log(this.devNumberTableData);
      this.queryModel();
    },
    computed: {
      tableDataPage() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      }
    },
    methods: {
      allPopSubmit() {
        this.delCloudTeller()
      },
      async branchInit() {
        let resBodyTellerSkills = new queryBranch();
        let responseTellerSkills = await request(resBodyTellerSkills);
        if (responseTellerSkills.SYS_HEAD.ReturnCode == "000000") {
          this.branchnoOpions = responseTellerSkills.RSP_BODY.resultSet;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerSkills.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      mutitypeFormat(row, column, cellValue, index) {
        //格式化模块
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        let value = cellValue.split("|");
        let module1 = "";
        for (let i = 0; i < value.length; i++) {
          module1 = module1 + this.mutitype[value[i]] + ",";
        }
        return module1.slice(0, module1.length - 1);
      },
      languageFormat(row, column, cellValue, index) {
        //格式化模块
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        let value = cellValue.split("|");
        let module1 = "";
        for (let i = 0; i < value.length; i++) {
          module1 = module1 + this.enumModule[value[i]] + ",";
        }
        return module1.slice(0, module1.length - 1);
      },
      selectChange(val) {
        this.multipleSelection = [];
        this.telleridSelection = [];
        if (val.length == 1) {
          this.delButtonShow = true;
          this.updateButtonShow = true;
          this.multipleSelection = val
        } else if (val.length > 1) {
          this.delButtonShow = true;
          this.updateButtonShow = false;
        } else {
          this.delButtonShow = false;
          this.updateButtonShow = false;
        }
        for (var i = 0; i < val.length; i++) {
          this.telleridSelection[i] = val[i].AGENTID;
        }
        console.log(this.telleridSelection)
      },
      addDialogShow() {
        this.addDialogOptions.isShow = !this.addDialogOptions.isShow;
      },
      updateDialogShow() {
        this.updateDialogOptions.isShow = !this.updateDialogOptions.isShow;
      },
      async delCloudTeller() {
        // this.$refs["confirmPopform"].validate(valid => {
        //   if (valid) {
            // if (this.$store.state.user.userId == this.confirmPopform.username.trim()) {
            //   this.$message({
            //     type: "warning",
            //     message: "授权用户须为同一机构的不同用户!"
            //   });
            //   return;
            // };
            // this.loading = true;
            // let resBody = new authorazitionIns(); //aums.v170_userauthcheck
            // resBody.data.checkUserID = sessionStorage.userId;
            // resBody.data.authUserName = this.confirmPopform.username.trim();
            // var a = new Base64();
            // resBody.data.userPwd = a.encode(this.confirmPopform.password);
            // this.confirmPopform = {
            //   username: "",
            //   password: ""
            // };
            // request(resBody)
            //   .then(response => {
                // if (response.SYS_HEAD.ReturnCode == "000000") {
                  let that=this
                  let resBody = new cloudTellerDel();
                  resBody.data.TELLEID = that.telleridSelection;
                  request(resBody)
                    .then(response => {
                      if (response.SYS_HEAD.ReturnCode == "000000") {
                        this.$message({
                          type: "success",
                          message:"云柜员用户删除成功!"
                        });
                        this.loading = false;
                        this.isShow1 = false
                        this.$emit("refreshTable");
                        this.queryModel('search');
                      } else {
                        this.$message({
                          type: "error",
                          message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                        });
                        this.isShow1 = false
                        this.loading = false;
                      }
                     
                    })
                  
                // } else {
                //   this.loading = false;
                //   //通讯失败
                //   this.$message({
                //     type: "warning",
                //     message: response.SYS_HEAD.ReturnMessage
                //   });
                // }
              // })
          // }
        // })
      },
      deleteConfirm() {
        this.$confirm("此操作将永久删除云柜员" + this.telleridSelection + " 是否继续？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            // this.isShow1=true
            this.allPopSubmit();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      async synchConfirm() {
        // this.loading = true;
          this.$message({
            type: "success",
            message: "同步成功"
          });
        let resBody = new syncDevData();
        let response = await request(resBody);
        this.loading = false;
        // if (response.SYS_HEAD.ReturnCode == "000000") {
        //   this.$message({
        //     type: "success",
        //     message: "同步成功"
        //   });
        // }
      },
      changePage(val) {
        this.currentPage = val
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      queryModel(data) {
        if(data == 'search'){
          this.currentPage = 1;
        }
        this.$refs["queryForm"].validate(valid => {
          if (valid) {
            this.loading = true;
            this.tableData = [];
            this.tableTotal = 0;
            let resBody = new cloudTellerQuery();
            // if(this.queryForm.branchId.length == 0){
            //   resBody.data.branchNo = this.$store.state.user.branchId;
            // }else{
            //   resBody.data.branchNo = this.queryForm.branchId[0];
            // }
            resBody.data.branch = this.queryForm.branchId
            resBody.data.language = this.queryForm.language;
            resBody.data.tellerstatus = this.queryForm.tellerstatus;
            resBody.data.tellerId = this.queryForm.tellerId;
            resBody.QueryPageNo = this.currentPage;
            resBody.QueryRowNum = this.pageSize;
            request(resBody)
              .then(response => {
                if (response.SYS_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  this.tableData = response.RSP_BODY.resultSet || [];
                  // this.tableTotal = response.RSP_BODY.total * 1 || response.QUERY_INFO_HEAD.QueryAllDataCount;
                } else {
                  this.$message({
                    type: "error",
                    message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
                  });
                  this.loading = false;
                }
              })
              .catch(error => {
                this.loading = false;
                console.log(error);
              });
          }
        });
      },
    },
    async created() {
      // let resBody = new spinnerList();
      // resBody.QueryRowNum = getGlobalParams.get("PageSize");
      // resBody.QueryPageNo = this.currentPage;
      // resBody.data.spinnerList = [{
      //   spinnerName: "branch"
      // }];
      // let response = await request(resBody);
      // if (response.SYS_HEAD.ReturnCode == "000000") {
      //   this.brno = response.RSP_BODY.branchSpinner;
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //   });
      // }
    }
  };
</script>


<style lang="scss" scope>
  .type-info-bottom {
    margin-top: 10px;
  }
  .box {
    margin-top: 20px;
    text-align: right;
  }
  .headerClass {
    background: #f7f7f7 !important;
  }
  .el-date-editor.el-input {
    width: 100% !important;
  }
  .el-card {
    overflow: inherit;
  }
</style>
